import { connect } from 'react-redux';
import { createAddPersonAction } from '../redux/action/person';
import { useRef } from 'react';

const Person = props => {
  const nameNode = useRef();
  const ageNode = useRef();

  const add = () => {
    props.addPerson({
      id: Date.now(),
      name: nameNode.current.value,
      age: ageNode.current.value,
    });
  };
  return (
    <div>
      <h2>Person组件，上方组件总和：{props.count}</h2>
      <input ref={nameNode} type="text" name="name" />
      <input ref={ageNode} type="number" name="age" />
      <button onClick={add}>添加</button>
      <div className="">
        <ul>
          {props.person.map(p => {
            return (
              <li key={p.id}>
                {p.name}---{p.age}
              </li>
            );
          })}
        </ul>
      </div>
    </div>
  );
};

// eslint-disable-next-line react-refresh/only-export-components
export default connect(
  state => ({ person: state.person, count: state.count }),
  {
    addPerson: createAddPersonAction,
  },
)(Person);
